<template>
  <div class="singerCate">
    <div class="songCateItem">
      <div class="songCateFirst">语种：</div>
      <div class="songCateItems">
        <div
          v-for="item in lang"
          :key="item.type"
          @click="currentLang = item.type;emit('changeTag');"
          :class="{changeColor:item.type === currentLang}"
        >
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <div class="songCateItem">
      <div class="songCateFirst">分类：</div>
      <div class="songCateItems">
        <div
          v-for="item in cate"
          :key="item.type"
          @click="currentCate = item.type;emit('changeTag');"
          :class="{changeColor:item.type === currentCate}"
        >
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
    <div class="songCateItem">
      <div class="songCateFirst">筛选：</div>
      <div class="songCateItems">
        <div
          v-for="item in En"
          :key="item.type"
          @click="currentEn = item.type;emit('changeTag');"
          :class="{changeColor:item.type === currentEn}"
        >
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from '@/http.ts'
import { ref, defineExpose, defineEmits } from 'vue'
type TSingerCate = {
  name: string
  type: number | string
}
const emit = defineEmits(['changeTag'])
const currentLang = ref<number>(-1)
const currentCate = ref<number>(-1)
const currentEn = ref<number | string>('')
defineExpose({
  currentLang,
  currentCate,
  currentEn
})
const cate: Array<TSingerCate> = [
  { name: '全部', type: -1 },
  { name: '男歌手', type: 1 },
  { name: '女歌手', type: 2 },
  { name: '乐队组合', type: 3 }
]
const lang: Array<TSingerCate> = [
  { name: '全部', type: -1 },
  { name: '华语', type: 7 },
  { name: '欧美', type: 96 },
  { name: '日本', type: 8 },
  { name: '韩国', type: 16 },
  { name: '其他', type: 0 }
]
const En: Array<TSingerCate> = [
  { name: '热门', type: -1 },
  { name: 'A', type: 'A' },
  { name: 'B', type: 'B' },
  { name: 'C', type: 'C' },
  { name: 'D', type: 'D' },
  { name: 'E', type: 'E' },
  { name: 'F', type: 'F' },
  { name: 'G', type: 'G' },
  { name: 'H', type: 'H' },
  { name: 'I', type: 'I' },
  { name: 'J', type: 'J' },
  { name: 'K', type: 'K' },
  { name: 'L', type: 'L' },
  { name: 'M', type: 'M' },
  { name: 'N', type: 'N' },
  { name: 'O', type: 'O' },
  { name: 'P', type: 'P' },
  { name: 'Q', type: 'Q' },
  { name: 'R', type: 'R' },
  { name: 'S', type: 'S' },
  { name: 'T', type: 'T' },
  { name: 'U', type: 'U' },
  { name: 'V', type: 'V' },
  { name: 'W', type: 'W' },
  { name: 'X', type: 'X' },
  { name: 'Y', type: 'Y' },
  { name: 'Z', type: 'Z' },
  { name: '#', type: 0 }
]
</script>

<style scoped lang="scss">
.singerCate {
  color: #b2b2b2;
  font-size: 13px;
  font-weight: bold;
  .songCateItem {
    width: 100%;
    margin: 16px 0;
    display: flex;
    .songCateFirst {
      flex-basis: 40px;
      margin-top: 6px;
    }
    .songCateItems {
      flex: 1;
      div {
        padding: 3px 0;
        box-sizing: border-box;
        font-size: 13px;
        font-weight: bold;
        color: #878787;
        text-align: center;
        display: inline-block;
        width: 68px;
        margin: 2px 0;
        &:hover {
          color: #b2b2b2;
          cursor: pointer;
        }
      }
    }
  }
}
.changeColor {
  background-color: #332726;
  color: #c3473a !important;
  border-radius: 6px;
}
</style>